<template>
  <div class="bar">
    <div class="title">
      {{chartData.title}}
    </div>
    <div class="bar-inner" ref="ChartBar"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'ChartBar',
  data () {
    return {
      chartBar: null
    }
  },
  props: {
    chartData: Object
  },
  mounted () {
    this.initChartBar()
  },
  methods: {
    initChartBar () {
      var option = {
        backgroundColor: '',
        // title: {
        //     text: '年发电量',
        //     textStyle:{
        //         color: '#fff'
        //     },
        //     left: 'center'
        // },
        grid: {
          top: '40',
          left: '45',
          right: '10',
          bottom: '20'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          // x坐标轴的颜色
          axisLine: {
            lineStyle: {
              color: '#d6d7d8'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: this.chartData.unit,
          axisLabel: {
            formatter: function (value, index) {
              if (value >= 10000 && value < 10000000) {
                value = value / 10000 + '万'
              } else if (value >= 10000000) {
                value = value / 10000000 + '千万'
              }
              return value
            }
          },
          // y坐标轴的颜色
          axisLine: {
            lineStyle: {
              color: '#d6d7d8'
            }
          },
          // y轴辅助线的颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: '#464648'
            }
          }
        },
        series: [{
          data: this.chartData.data,
          type: this.chartData.type,
          itemStyle: {
            normal: {
              color: this.chartData.color
            }
          }
        }]
      }
      this.chartBar = echarts.init(this.$refs.ChartBar)
      this.chartBar.setOption(option)
      window.addEventListener('resize', () => {
        this.chartBar.resize()
      })
    }
  }
}
</script>
<style lang="scss">
  .bar{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #070c1e;
    border: 1px solid #01040f;
    border-radius: 2px;
    .title{
      position: absolute;
      top: 5px;
      width: 100%;
      height: 16px;
      font-size: 14px;
      color: #fff;
      font-weight: 400;
    }
    .bar-inner{
      width: 100%;
      height: 100%;
    }
  }
</style>